<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手风琴</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	ul {
		list-style: none;
	}
	a{
		text-decoration: none;
	}
	#box {
		width:1400px;
	}
	#box li {
		float: left;
		width: 200px;
		height: 260px;
	}
	#box li a{
		display: block;
		width: 100%;
		height: 100%;
		color: #fff;
		background: rgba(0, 0, 0, .3);
	}
	#box li a span{
		display: block;
		margin: 0 auto;
		padding-top: 40px;
		width: 24px;
		font-size: 24px;
	}
	</style>
	<!--<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>-->

	<script src="jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		;(function ($) {
			$(function () {
				$('#box li').hover(function () {

					//每次做动画之前 先把上次动画清除掉,不然效果不好
					$(this).children('a').css({display:'none'}).end().stop()
							.animate({width: 400}).siblings().stop().animate({width: 160});
				}, function () {
					console.log(this)//this 是选中的元素
					$(this).children('a').css('display', 'block');

					$('#box li').stop().animate({width: 200});
				});
			});
		})(jQuery);
	</script>
</head>
<body>
	<ul id="box">
		<li style="background: url(images/1.jpg) center no-repeat"><a href="javascript:;"><span>温泉酒店</span></a></li>
		<li style="background: url(images/2.jpg) center no-repeat"><a href="javascript:;"><span>情侣酒店</span></a></li>
		<li style="background: url(images/3.jpg) center no-repeat"><a href="javascript:;"><span>设计酒店</span></a></li>
		<li style="background: url(images/4.jpg) center no-repeat"><a href="javascript:;"><span>青年旅社</span></a></li>
		<li style="background: url(images/5.jpg) center no-repeat"><a href="javascript:;"><span>特色客栈</span></a></li>
		<li style="background: url(images/6.jpg) center no-repeat"><a href="javascript:;"><span>海岛酒店</span></a></li>
	</ul>
</body>
</html>